<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标题记得要改！！！！！</title>
    <link rel="stylesheet" href="bootstrap-4.6.1-dist/css/bootstrap.min.css">
    <style>
        body{
            margin:0px;
            padding:0px;
            font-family:sans-serif;
            background: url(img/userLogin_bg.jpg);
            background-size:cover;
        }
        .box{
            position:absolute;
            top:50%;
            left:50%;
            transform:translate(-50%,-50%);
            /*实现块元素百分比下居中*/
            width:450px;
            padding:50px;
            background: rgba(0,0,0,.7);
            box-sizing:border-box;
            box-shadow: 0px 15px 25px rgba(0,0,0,.5);
            border-radius:15px;
        }
        .box h2{
            margin:0 0 30px;
            padding:0;
            color: #fff;
            text-align:center;
        }
        .box h5{
            margin:0 0 30px;
            padding:0;
            color: #fff;
            text-align:left;
        }
        .box .inputbox{
            position:relative;
        }
        .box .inputbox input{
            width: 100%;
            padding:10px 0;
            font-size:16px;
            color:#fff;
            letter-spacing: 1px;
            margin-bottom: 30px;
            border:none;
            border-bottom: 1px solid #fff;
            outline:none;
            background: transparent;
        }
        .box .inputbox label{
            position:absolute;
            top:0px;
            left:0px;
            padding:10px 0;
            font-size: 16px;
            color:#fff;
            pointer-events:none;
            transition:.5s;
        }
        .box .inputbox input:focus ~ label,
        .box .inputbox input:valid ~ label
        {
            top:-18px;
            left:0;
            color:#03a9f4;
            font-size:14px;
        }
        .box input[type="submit"],
        .box a
        {
            border: none;
            outline:none;
            font-size: 12px;
            color:#fff;
            padding:15px 20px;
            cursor: pointer;
            border-radius:10px;
        }
    </style>
</head>
<body>
<div class="box">
    <!--一级标题-->
    <h2>爱思教育</h2>
    <!--二级标题-->
    <h5>二级标题，比如登录注册之类的</h5>
    <form>
        <div class="inputbox">
            <input type="text" name="" required="">
            <label>输入框1</label>
        </div>
        <div class="inputbox">
            <input type="password" name=" " required="">
            <label>输入框2</label>
        </div>
        <div class="row">
            <div class="col col-6">
                <div>
                    <a class="" href="userRegister.html">还没账号？点我注册</a>
                </div>
                <div>
                    <a class="" href="userFindPassword.html">忘记密码？点我找回</a>
                </div>
                <div>
                    <a class="" href="userLogin.html">想起密码？点我登录</a>
                </div>
            </div>
            <div class="col">
            </div>
            <div class="col">
                <input class="btn btn-primary btn-outline-primary align-content-center text-center" type="submit" name="" value="按钮">
            </div>
        </div>
    </form>
</div>
</body>
</html>